<template>
	<view class="shop">
		<view class="shop-top">
			<view class="shop-top-left">
				<text>全国</text>
				<image src="../../static/area.svg" mode="widthFix" style="width: 42rpx;height: 42rpx;"></image>
			</view>
			<view class="shop-top-right">
				<view class="shop-top-right-connet">
					<view class="shop-top-right-connet-left">
						<image src="../../static/search.svg" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="shop-top-right-connet-right">
						<input type="text" placeholder="发现店铺更多商品,搜一搜~">
					</view>
				</view>
			</view>
		</view>
		<view class="shop-banner">
			<view class="shop-banner-connet">
				<image src="../static/shop/shop_baner.jpg" style="width: 100%; height: 100%;border-radius: 12rpx;"></image>
			</view>
		</view>
		<view class="shop-choose">
			<view class="shop-choose-left">
				<view class="shop-choose-left-title" :class="{ batartext : choose == 0 }" @click="choose = 0">
					<text>综合排序</text>
				</view>
				<view class="shop-choose-left-title" :class="{ batartext : choose == 1 } " @click="choose = 1">
					<text>排序</text>
					<view class="shop-choose-left-title-img">
						<view class="shop-choose-left-title-img-top">
							<image src="../static/shop/down2.png" mode="widthFix" style="width: 80%;height: 48rpx;"></image>
						</view>
						<view class="shop-choose-left-title-img-bottom">
							<image src="../static/shop/down1.png" mode="widthFix" style="width: 80%; height: 48rpx;"></image>
						</view>
					</view>
				</view>
				<view class="shop-choose-left-title" :class="{ batartext : choose == 2 }" @click="choose = 2">
					<text>新品</text>
				</view>
			</view>
			<view class="shop-choose-right">
				<view class="shop-choose-right-part" @click="sorticon = ! sorticon">
					<image src="../static/shop/sort1.png" mode="widthFix" style="width: 48rpx; height: 48rpx;" v-show="sorticon"></image>
					<image src="../static/shop/sort2.png" mode="widthFix" style="width: 48rpx; height: 48rpx;" v-show="!sorticon"></image>
				</view>
			</view>
		</view>
		<view class="shop-tabar">
			<view class="shop-tabar-part" v-for="(item,index) in tabaricon" :key="index" @click="ToPages(index)">
				<view class="shop-tabar-part-top" >
					<image :src="item.img" mode="widthFix" style="width: 62rpx; height: 62rpx;" v-show="index !== tabarclick"></image>
					<image :src="item.img_hover" mode="widthFix" style="width: 62rpx; height: 62rpx;" v-show="index == tabarclick"></image>
				</view>
				<view class="shop-tabar-part-bottom" :class="{batartext:index == tabarclick}">
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="shop-goods" v-show="sorticon">
			<view class="shop-goods-part">
				<view class="shop-goods-part-good" v-for="(item,index) in [1,2,3]" :key="index">
				</view>
			</view>
		</view>
		<view class="shop-goods2" v-show="!sorticon">
			<view class="shop-goods2-part"  v-for="(item,index) in [1,2,3,4,5]" :key="index">
				<view class="shop-goods2-part-left">
					<image src="../static/20221011165448.jpg" mode="widthFix" style="width: 90%; height: 90%;"></image>
				</view>
				<view class="shop-goods2-part-right">
					<view class="shop-goods2-part-right-top">
						<text>商品名字名字名字</text>
					</view>
					<view class="shop-goods2-part-middle">
						<view class="goods-connet-tips-list" style="margin-left: 0rpx;">
							<text>包邮</text>
						</view>
						<view class="goods-connet-tips-list" style="width: 100rpx; background-color: #ffedee; color: red;">
							<text>可买断</text>
						</view>
						<view class="goods-connet-tips-list" style=" background-color: #ffedee; color: red;">
							<text>全新</text>
						</view>
					</view>
					<view class="shop-goods2-part-right-bottom">
						<view class="shop-goods2-part-right-bottom-left">
							<text>￥1.00</text>
							<text style="font-size: 28rpx;">/天</text>
						</view>
						<view class="shop-goods2-part-right-bottom-left" style="color: #7f7f7f; font-size: 24rpx; justify-content: flex-end;">
							<text>180天起租</text>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabar:['首页','分类','客服','我的'],
				tabaricon:[
					{
						name:'首页',
						img:'../static/shop/shop-icon-index.png',
						img_hover:'../static/shop/shop-icon-index-hover.png'
					},
					{
						name:'分类',
						img:'../static/shop/shop-icon-classify.png',
						img_hover:'../static/shop/shop-icon-classify-hover.png'
					},
					{
						name:'客服',
						img:'../static/shop/shop-icon-service.png',
						// img_hover:'../../static/shop/shop-icon-service.png'
					},
					{
						name:'我的',
						img:'../static/shop/shop-icon-mine.png'
						// img_hover:'../../static/shop/shop-icon-classify-hover.png'
					}
				],
				tabarclick:0,
				choose:0,
				sorticon:true,
			}
		},
		onLoad() {
			// console.log(this.tabaricon)
			// uni.request({
			// 	url:'https://testtxxzdata.tingxiangzu.com/Douyin/Shop/getShopIndex',
			// 	method:'POST',
			// 	data:{
					
			// 	}
			// })
		},
		methods: {
			ToPages(index){
				// console.log(index)
				if(index <= 1){
				this.tabarclick = index
				}else if(index == 2){
					uni.switchTab({
						url:'../../pages/service/service'
					})
				}else if(index == 3){
					uni.switchTab({
						url:'../../pages/user/user'
					})
				}
			}
		}
	}
</script>

<style>
	page{
		width: 100%;
		height: 100%;
		background-color: #f7f7f7;
	}
	.shop{
		width: 100%;
		height: 100%;
	}
	.shop-top{
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: center;
	}
	.shop-top-left{
		width: 20%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.shop-top-right{
		width: 80%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.shop-top-right-connet{
		width: 90%;
		height: 72%;
		background-color: #adadad;
		border-radius: 42rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.shop-top-right-connet-left{
		width: 48rpx;
		height: 48rpx;
		margin-left: 20rpx;
		margin-right: 10rpx;
	}
	.shop-top-right-connet-right{
		height: 48rpx;
		width: calc( 90% - 68rpx );
	}
	.shop-banner{
		width: 100%;
		height: 360rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.shop-banner-connet{
		width: 90%;
		height: 90%;
		background-color: white;
		border-radius: 12rpx;
	}
	.shop-choose{
		width: 100%;
		height: 100rpx;
		background-color: white;
		display: flex;
		justify-content: center;
	}
	.shop-tabar{
		width: 100%;
		height: 120rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
		border-top: #f7f7f7 solid 2rpx ;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		z-index: 99;
	}
	.shop-tabar-part{
		width: 120rpx;
		height: 120rpx;
	}
	.shop-tabar-part-top{
		width: 100%;
		height: 60%;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}
	.shop-tabar-part-bottom{
		width: 100%;
		height: 40%;
		font-size: 28rpx;
		color: #7f7f7f;
		display: flex;
		justify-content: center;
		align-items: flex-start;
	}
	.batartext{
		color: red !important;
	}
	.shop-choose-left{
		width: 80%;
		height: 100%;
		display: flex;
		justify-content: space-around;
	}
	.shop-choose-right{
		width: 20%;
		height: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		
	}
	.shop-choose-left-title{
		width: 30%;
		height: 100%;
		font-size: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #7f7f7f;
	}
	.shop-choose-left-title-img{
		width: 20%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-content: space-between;
		flex-wrap: wrap;
	}
	.shop-choose-left-title-img-top{
		width: 100%;
		height: 50%;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		margin-bottom: 10rpx;
	}
	.shop-choose-left-title-img-bottom{
		width: 100%;
		height: calc(50% - 10rpx);
		display: flex;
		justify-content: center;
		align-items: flex-start;
	}
	.shop-choose-right-part{
		width: 100%;
		height: 80%;
		border-left: #7f7f7f solid 2rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.shop-goods{
		width: 100%;
/* 		height: 100%; */
		background-color: aqua;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.shop-goods-part{
		width: 90%;
/* 		height: 100%; */
		background-color: aquamarine;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-content: flex-start;
		margin-bottom: 200rpx;
	}
	.shop-goods-part-good{
		width: 48%;
		height: 400rpx;
		background-color: bisque;
		margin-top: 20rpx;
	}
	.shop-goods2{
		width: 100%;
		padding-bottom: 200rpx;
	}
	.shop-goods2-part{
		width: 90%;
		height: 240rpx;
		background-color: white;
		margin: auto;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		border-radius: 12rpx;
	}
	.shop-goods2-part-left{
		width: 240rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.shop-goods2-part-right{
		width: calc(100% - 240rpx);
		height: 100%;
		display: flex;
		justify-content: flex-end;
		flex-wrap: wrap;
	}
	.shop-goods2-part-right-top{
		width: 96%;
		height: 33%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 32rpx;
	}
		
	.shop-goods2-part-middle{
		width: 96%;
		height: 33%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.shop-goods2-part-right-bottom{
		width: 96%;
		height: 33%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
		
	.shop-goods2-part-right-bottom-left{
		width: 50%;
		height: 70%;
		color: red;
		font-size: 38rpx;
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
	}
	.goods-connet-tips-list{
		width: 80rpx;
		height: 40rpx;
		background-color: #e7f6f1;
		display: flex;
		justify-content: center;
		align-items: center;
		color: mediumspringgreen;
		font-size: 28rpx;
		border-radius: 6rpx;
		margin-left: 10rpx;
	}
</style>
